<template>
  <div>
    <div class="manage-header">
      <el-button
        type="primary"
        @click="Loadingdata"
        :loading-icon="Eleme"
        :loading="loading"
        >刷新数据</el-button
      >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label-width="50px" label="详情">
          <el-input
            v-model="search"
            size="default"
            placeholder="请输入关键信息"
            @keypress.enter="filterTableData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-drawer v-model="isShow" title="发展党员">
      <el-form :model="operateForm" label-position="left" label-width="120px">
        <!-- <h1>{{ operateForm.id }}</h1>
        <h1>{{ operateForm.user_name }}</h1> -->
        <el-form-item label="党员id">
          <el-input disabled v-model="operateForm.id" />
        </el-form-item>
        <el-form-item label="党员姓名">
          <el-input disabled v-model="operateForm.user_name" />
        </el-form-item>
        <el-form-item label="党员身份">
          <el-select v-model="operateForm.is_admin" placeholder="请选择身份">
            <el-option
              v-for="item in options2"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入党时间">
          <el-date-picker
            v-model="operateForm.created_At"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker
            v-model="operateForm.updated_At"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(operateForm)"
            >确定修改</el-button
          >
          <el-button @Click="goback()">取消修改</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <div class="tablebox">
      <el-table
        :data="listdata.slice((page - 1) * limit, page * limit)"
        style="width: 100%"
      >
        <el-table-column fixed prop="id" label="用户id" width="70" />
        <el-table-column fixed prop="Account" label="账号" width="120" />
        <el-table-column prop="user_name" label="用户名" width="220" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="sex" label="性别">
          <template #default="scope">
            <el-tag
              class="mx-1"
              size="large"
              :type="
                scope.row.sex == 1
                  ? ''
                  : scope.row.sex == 2
                  ? 'success'
                  : 'warning'
              "
            >
              {{
                scope.row.sex == 1 ? "女" : scope.row.sex == 2 ? "男" : "保密"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="picture" label="City" width="320" /> -->
        <el-table-column prop="picture" label="缩略图" width="220">
          <template #default="scope">
            <el-popover placement="right" :width="100" title="" trigger="hover">
              <img
                :src="scope.row.picture"
                style="width: 125px; height: 120px"
              />
              <template #reference>
                <img
                  slots="reference"
                  :src="scope.row.picture"
                  style="width: 30px; height: 30px"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="created_At" label="注册时间" width="150" />
        <el-table-column prop="updated_At" label="更新时间" width="150" />
        <el-table-column prop="is_admin" label="用户身份" width="150">
          <template #default="scope">
            <el-tag
              class="mx-1"
              size="large"
              :type="
                scope.row.is_admin == 1
                  ? ''
                  : scope.row.is_admin == 2
                  ? 'success'
                  : scope.row.is_admin == 3
                  ? 'info'
                  : scope.row.is_admin == 4
                  ? 'warning'
                  : 'danger'
              "
            >
              {{
                scope.row.is_admin == 1
                  ? "管理员"
                  : scope.row.is_admin == 2
                  ? "党委"
                  : scope.row.is_admin == 3
                  ? "团支书"
                  : scope.row.is_admin == 4
                  ? "党员"
                  : "发展党员"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="用户编辑" width="150">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="large"
              @click="edituser(scope.$index, scope.row)"
            >
              <el-icon><Edit /></el-icon> 修改
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="deleteruser(scope.$index, scope.row)"
            >
              <el-icon><Delete /></el-icon>退回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :currentPage="page"
        :page-size="limit"
        :page-sizes="[5, 10]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="TableDatatoal"
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getuserlist, adminuserupdate } from "@/request/user";
import { Eleme } from "@element-plus/icons-vue";
const list = reactive({
  listdata: [],
  limit: 5,
  page: 1,
  isShow: false,
  loading: false,
  operateForm: {
    id: "",
    user_name: "",
    Account: "",
    email: "",
    picture: "",
    created_At: "",
    updated_At: "",
    is_admin: "",
    sex: "",
  },
});
let { listdata, limit, page, isShow, operateForm, loading } = toRefs(list);

const search = ref("");
onMounted(() => {
  console.log("查询");
  getuserlistinfo();
});

const Loadingdata = () => {
  list.loading = true;
  setTimeout(() => {
    list.loading = false;
    getuserlistinfo();
  }, 2000);
};

const options2 = [
  {
    value: 2,
    label: "党委",
  },
  {
    value: 3,
    label: "团支书",
  },
  {
    value: 4,
    label: "党员",
  },
];

// 用户名搜索
let filterTableData = (val) => {
  let arr = [];
  if (search.value) {
    arr = list.listdata.filter((data) => {
      return data.user_name.indexOf(search.value.toString()) !== -1;
    });
  } else {
    arr = list.listdata;
  }
  list.listdata.length = arr.length;
  list.listdata = arr;
};

const edituser = (index, row) => {
  list.operateForm = {
    id: row.id,
    user_name: row.user_name,
    Account: row.Account,
    created_At: row.created_At,
    updated_At: row.updated_At,
    is_admin: row.is_admin,
  };
  list.isShow = true;
};

watch([() => search.value], () => {
  if (search.value == "") {
    getuserlistinfo();
  }
});

const getuserlistinfo = async () => {
  let { userlist } = await getuserlist();
  for (let i = 0; i < userlist.length; i++) {
    userlist[i].created_At = userlist[i].created_At?.slice(0, 10);
    userlist[i].updated_At = userlist[i].updated_At?.slice(0, 10);
    userlist[i].picture = userlist[i].picture
      ? "/api/static/" + userlist[i].picture
      : "/api/static/default/default.png";
  }
  list.listdata = userlist.filter((v) => v.is_admin !== 5 && v.is_admin !== 1);
  console.log("用户列表");
};

const onSubmit = async (formEl: FormInstance | undefined) => {
  let { id, is_admin, user_name, created_At, updated_At } = formEl;
  if (formEl) {
    adminuserupdate({
      id,
      is_admin,
      user_name,
      created_At,
      updated_At,
    }).then((res) => {
      let { code, message } = res;
      if (code == 0) {
        ElMessage({
          message: message,
          type: "success",
        });
        getuserlist();
      } else {
        ElMessage({
          message: message,
          type: "error",
        });
      }
      getuserlistinfo();
    });
    list.isShow = false;
  }
};

const goback = () => {
  list.isShow = false;
};

const deleteruser = async (index, row) => {
  console.log(index, row);
  let { id, is_admin } = row;
  is_admin = 5;
  await adminuserupdate({
    id,
    is_admin,
  }).then((res) => {
    let { code, message } = res;
    if (code == 0) {
      ElMessage({
        message: message,
        type: "success",
      });
      getuserlist();
    } else {
      ElMessage({
        message: message,
        type: "error",
      });
    }
  });
  getuserlistinfo();
};
</script>

<style lang="scss" scoped>
.manage-header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
</style>
